<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="日程安排">
    <meta
      id="viewport"
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>日程安排</title>
    <style>
ul.ulist {
  list-style: none;
}
 
/* 加这个保留原始ul前的圆点 */
ul.ulist.u-origin {
  list-style: disc outside none;
}
 
.ulist li a {
  color: #333;
  text-decoration: none;
  display: block;
  padding: 20px 0;
  margin: 0 20px;
  position: relative;
  border-top: 1px solid #cbcbcb;
}
 
.ulist li a:focus {
  outline: 0 none;
}
 
.ulist li.selected a {
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #ebebeb;
  border-bottom: 1px solid #cbcbcb;
}
 
.ulist li.subsquence a {
  border-top: 0;
}
 
.ulist > li:last-child a {
  border-bottom: 1px solid #cbcbcb;
}
 
.ulist li {
  overflow: hidden;
  background: #fff;
}
 
.ulist.u-origin li {
  overflow: auto;
}
 
.ulist .content {
  padding: 0.65rem 0;
  border-bottom: 1px solid #d2d2d2;
  margin: 0 1rem;
}
 
.ulist li:last-child .content,
.ulist li.subsquence .content,
.ulist li:last-child.selected .content {
  border-bottom: 0;
}
 
.ulist li.selected .content {
  margin-left: 0;
  margin-right: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: #ebebeb;
  border-top: 1px solid #cbcbcb;
  border-bottom: 1px solid #cbcbcb;
}
 
.ulist li:first-child.selected .content {
  border-top: 0;
}
 
ul.horizontal {
  overflow: hidden;
  list-style: none;
}
 
ul.horizontal > li {
  float: left;
}
      body {
        padding: 0;
        margin: 0;
      }
      #app {
        padding-bottom: 20px;
      }
      h3 {
        padding: 0 1rem;
      }
      h3 small {
        color: #bbb;
      }
      .ulist {
        padding: 0;
        margin: 0;
        border-top: 1px solid #cbcbcb;
        border-bottom: 1px solid #cbcbcb;
      }
      .ulist .content {
        overflow: hidden;
      }
      .content .time {
        float: left;
      }
      .content .event {
        padding-left: 6em;
      }
      .icon {
        font-style: normal;
        font-weight: bold;
        font-size: 1.5em;
        display: block;
        margin-top: -12px;
        position: absolute;
        top: 50%;
        right: 0;
        color: #ccc;
        width: 20px;
        text-align: right;
        height: 24px;
        line-height: 24px;
      }
      .selected .icon {
        color: #38f;
      }
      .with-icon .event {
        padding-right: 30px;
        position: relative;
      }
      .emphasize {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h3>2018年10月5日（农历八月廿六）<small>第1天</small></h3>
      <ul class="ulist">
        <li>
          <div class="content with-icon" aria-url='http://api.map.baidu.com/marker?location=30.811328,120.617237&title=新娘家&content=新盛水岸&output=html&src=webapp.wysdgs.wysdgs'>
            <div class="time">7:00~8:00</div>
            <div class="event">接新娘，大巴车在新盛水岸小区门口就位<i class="icon">&gt;</i></div>
          </div>
        </li>

        <li>
          <div class="content with-icon" aria-url='http://api.map.baidu.com/direction?origin=latlng:30.811328,120.617237|name:新盛水岸&destination=latlng:30.654387,117.501038|name:池州比高公寓式宾馆&mode=driving&origin_region=嘉兴&destination_region=池州&output=html&src=webapp.wysdgs.wysdgs'>
            <div class="time">8:00~9:00</div>
            <div class="event">出发前往池州比高公寓式宾馆<i class="icon">&gt;</i></div>
          </div>
        </li>

        <li>
          <div class="content">
            <div class="time">12:00</div>
            <div class="event">高速服务区休息吃午饭，然后继续赶路</div>
          </div>
        </li>

        <li>
          <div class="content with-icon" aria-url='http://api.map.baidu.com/marker?location=30.654387,117.501038&title=宾馆&content=池州比高公寓式宾馆&output=html&src=webapp.wysdgs.wysdgs'>
            <div class="time">15:00</div>
            <div class="event">预计到达宾馆的时间，但是具体时间无法确定，要看当天的路况，在高速不堵的情况下需要5小时。到达后，要给新娘化妆，换婚纱，新娘亲友们可在此稍做休息<i class="icon">&gt;</i></div>
          </div>
        </li>

        <li>
          <div class="content">
            <div class="time">16:00</div>
            <div class="event">待准备完成，换乘轿车车队开去新郎家，大巴跟随，跟妆和摄影也一起</div>
          </div>
        </li>

        <li>
          <div class="content with-icon" aria-url='http://api.map.baidu.com/marker?location=30.630992,117.416704&title=新郎家&content=谷塘村7组&output=html&src=webapp.wysdgs.wysdgs'>
            <div class="time">17:00</div>
            <div class="event">车队到家后，正式开席，<b class='emphasize'>邀请离池州近的朋友来参加这场宴席</b><i class="icon">&gt;</i></div>
          </div>
        </li>
        
        <li>
          <div class="content">
            <div class="time">19:00</div>
            <div class="event">晚上新娘亲友乘大巴回到市区宾馆过夜</div>
          </div>
        </li>
      </ul>

      <h3>2018年10月6日（农历八月廿七）<small>第2天</small></h3>
      <ul class="ulist">
        <li>
          <div class="content">
            <div class="time">8:00~9:00</div>
            <div class="event">新娘、新郎以及新郎亲友前往宾馆，与新娘亲友会合，坐大巴返回新娘家参加晚宴</div>
          </div>
        </li>
      </ul>

      <h3>2018年10月7日（农历八月廿八）<small>第3天</small></h3>
      <ul class="ulist">
        <li>
          <div class="content with-icon" aria-url='http://api.map.baidu.com/marker?location=30.811328,120.617237&title=新娘家&content=新盛水岸&output=html&src=webapp.wysdgs.wysdgs'>
            <div class="time">12:00</div>
            <div class="event">新娘家的正式宴席，<b class='emphasize'>邀请离嘉兴近的朋友来参加这场宴席</b><i class="icon">&gt;</i></div>
          </div>
        </li>
      </ul>
    </div>

    <script type="text/javascript" src="http://xiongbin.tk/assets/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script type="text/javascript">
      $(function() {
        
        $('#app')
          .delegate('li', 'touchstart', function(eve) {
            $(this).addClass('selected');
            // $(this).addClass('btn-ripple-hover');
            $(this).prev().addClass('subsquence');
            // eve.preventDefault(); // 阻止浏览器默认事件，重要 
          })
          .delegate('li', 'touchmove', function(eve) {
            // $(this).removeClass('btn-ripple-hover');
            $(this).removeClass('selected');
            $(this).prev().removeClass('subsquence');
            // eve.preventDefault(); // 阻止浏览器默认事件，重要 
          })
          .delegate('li', 'touchend', function(eve) {
            // $(this).removeClass('btn-ripple-hover');
            $(this).removeClass('selected');
            $(this).prev().removeClass('subsquence');
            // eve.preventDefault(); // 阻止浏览器默认事件，重要 
          })
          .delegate('.with-icon', 'click', function() {
            window.location.href = $(this).attr('aria-url')
          });
      })

      wx.ready(function(){
    	$('#app').delegate('.content', 'click', function() {
    		wx.getLocation({
				type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
				success: function (res) {
					var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
					var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
					var speed = res.speed; // 速度，以米/每秒计
					var accuracy = res.accuracy; // 位置精度

					wx.openLocation({
						latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
						longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
						name: '我在这儿', // 位置名
						address: '我现在在这里', // 地址详情说明
						scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
						infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
					});
				}
			});

    		
    	})
	  });
    </script>
  </body>
</html>
